<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2022-03-14 14:39:00
 * @LastEditors: younghxp
 * @LastEditTime: 2022-04-08 15:36:34
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    @close="closeDialog"
    custom-class="dialog-minwidth"
    width="940px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="140px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="项目名称："
            prop="projectId"
            class="row-padding-bottom"
          >
            <el-input
              v-model="ruleForm.projectName"
              :disabled="dialogType === 'edit'"
              placeholder="请输入项目名称"
              clearable
              @input="changeProjectName"
              class="dialogDoubleInp"
            ></el-input>
            <div v-show="projectNameFlag" class="commonStyle">
              <p
                v-for="(item, index) in likeProjects"
                :key="index"
                @click="clickShowProject(item)"
                ref="projectName"
              >
                {{ item.projectName || '--' }}
              </p>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="默认类型："
            prop="projectWhiteType"
            class="row-padding-bottom"
          >
            <el-select
              v-model="ruleForm.projectWhiteType"
              placeholder="请选择"
              class="dialogDoubleInp"
            >
              <el-option label="普通项目" value="ORDINARY_PROJECT"></el-option>
              <el-option label="小项目" value="MINI_PROJECT"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="列入名单原因：" class="row-padding-bottom">
        <el-input
          type="textarea"
          :rows="3"
          :maxlength="200"
          placeholder="请输入列入名单原因"
          show-word-limit
          v-model="ruleForm.reason"
        ></el-input>
      </el-form-item>
      <template v-if="ruleForm.projectWhiteType === 'MINI_PROJECT'">
        <el-divider></el-divider>
        <div style="margin: 20px 0 22px">
          <div class="secondaryTitle secondaryTitleTheme">小项目功能设置</div>
          <div style="padding-left: 16px">
            附件备案等同于有实名制、考勤、工资代发；系统不对小项目评分
          </div>
        </div>
        <el-form-item label="工人名册：" prop="isRegister">
          <el-radio-group v-model="ruleForm.isRegister" @change="handleReg">
            <el-radio :label="1">录入实名制信息</el-radio>
            <el-radio :label="0">附件备案人员名单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工人考勤：" prop="isAtt">
          <el-radio-group v-model="ruleForm.isAtt" @change="handleAtt">
            <el-radio :label="1">实名制打卡</el-radio>
            <el-radio :label="0">附件备案人员考勤信息</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工资发放：" prop="isSalary">
          <el-radio-group v-model="ruleForm.isSalary" @change="handleSalary">
            <el-radio :label="1" style="width: 100%; display: block"
              >银行代发：使用银行代发功能发放工资，需开设工资专户，缴纳保证金</el-radio
            >
            <el-radio :label="0" style="width: 100%; display: block"
              >附件备案：备案工资发放记录，无需开设工资专户，缴纳保证金</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工伤保险：" prop="isIns">
          <el-radio-group v-model="ruleForm.isIns" @change="handleIns">
            <el-radio :label="1">缴纳工伤保险</el-radio>
            <el-radio :label="0">无需缴纳工伤保险</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否对项目预警：" prop="isAlert">
          <el-radio-group v-model="ruleForm.isAlert">
            <el-radio :label="1">否：不新增预警</el-radio>
            <!-- <el-radio :label="0">是：按预警配置规则，预警项目问题</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否统计：" prop="isStats">
          <el-radio-group v-model="ruleForm.isStats">
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否对项目评分：" prop="isCreait">
          <el-radio-group v-model="ruleForm.isCreait">
            <el-radio :label="1">否：默认不对小项目新增评价</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="closeDialog" class="cancel">取 消</el-button>
      <el-button
        type="primary"
        class="save"
        @click.native="saveAdd('ruleForm')"
        :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'WhiteListDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogType: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogTitle: '',
      likeProjects: [],
      projectNameFlag: false,
      ruleForm: {
        projectName: '',
        projectId: '',
        projectWhiteType: '',
        reason: '',
        isRegister: 1,
        isAtt: 1,
        isSalary: 1,
        isIns: 1,
        isAlert: 1,
        isStats: 1,
        isCreait: 1,
      },
      rules: {
        projectId: [
          {
            required: true,
            message: '请选择项目名称',
            trigger: 'blur',
          },
        ],
        projectWhiteType: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change',
          },
        ],
        isRegister: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        isAtt: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        isSalary: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        isIns: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        isAlert: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        isStats: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        isCreait: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
      },
      loading: false,
    }
  },
  created() {
    this.dialogTitle = this.dialogType === 'add' ? '添加白名单' : '修改白名单'
    if (this.dialogType === 'edit') {
      this.getDetail()
    }
  },
  methods: {
    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-p/smallprojectwhite/whiteDetail',
        data: {
          id: this.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.ruleForm = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    changeProjectName() {
      this.likeProjects = []
      this.ruleForm.projectId = ''
      this.axios({
        method: 'post',
        url: 'api-p/smallprojectwhite/findProjectNoWhite',
        data: {
          projectName: this.ruleForm.projectName,
        },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            var listTemps = resp.data.result
            if (listTemps.length > 5) {
              for (var i = 0; i < 5; i++) {
                this.likeProjects.push(listTemps[i])
              }
            } else {
              this.likeProjects = listTemps
            }
            if (this.likeProjects.length > 0) {
              this.projectNameFlag = true
            }
          }
        })
        .catch((err) => {
          this.$message.error('数据获取失败')
        })
    },
    clickShowProject(item) {
      this.ruleForm.projectId = item.id
      this.ruleForm.projectName = item.projectName
      this.projectNameFlag = false
      this.$refs.ruleForm.validateField('projectId')
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    //工人名册
    handleReg(value) {
      if (value === 0) {
        this.ruleForm.isAtt = 0
        this.ruleForm.isIns = 0
        this.ruleForm.isSalary = 0
        // this.ruleForm.isAlert = 0
      }
    },
    //选择工人考勤
    handleAtt(value) {
      if (this.ruleForm.isRegister === 0 && value === 1) {
        this.$message.warning('【工人名册】需选择：录入实名制信息')
        this.ruleForm.isAtt = 0
        this.ruleForm.isSalary = 0
        // this.ruleForm.isAlert = 0
      } else if (value === 0) {
        this.ruleForm.isSalary = 0
        // this.ruleForm.isAlert = 0
      }
    },
    //工资发放
    handleSalary(value) {
      if (this.ruleForm.isAtt === 0 && value === 1) {
        this.$message.warning('【工人考勤】需选择：实名制打卡')
        this.ruleForm.isSalary = 0
      }
    },
    //
    handleIns(value) {
      if (this.ruleForm.isRegister === 0 && value === 1) {
        this.$message.warning('【工人名册】需选择：录入实名制信息')
        this.ruleForm.isIns = 0
      }
    },
    //预警
    handleAlert(value) {
      if (
        (this.ruleForm.isSalary === 0 || this.ruleForm.isIns === 0) &&
        value === 1
      ) {
        this.$message.warning(
          '【工资发放】需选择：银行代发；【工伤保险】需选择：缴纳工伤保险'
        )
        this.ruleForm.isAlert = 0
      }
    },
    saveAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let data = {
            projectId: this.ruleForm.projectId,
            projectWhiteType: this.ruleForm.projectWhiteType,
            reason: this.ruleForm.reason,
          }
          if (this.ruleForm.projectWhiteType === 'MINI_PROJECT') {
            Object.assign(data, {
              isRegister: this.ruleForm.isRegister,
              isAtt: this.ruleForm.isAtt,
              isSalary: this.ruleForm.isSalary,
              isIns: this.ruleForm.isIns,
              isAlert: this.ruleForm.isAlert,
              isStats: this.ruleForm.isStats,
              isCreait: this.ruleForm.isCreait,
            })
          }
          if (this.dialogType === 'edit') {
            Object.assign(data, { id: this.id })
          }
          return this.axios({
            method: 'post',
            url:
              this.dialogType === 'add'
                ? 'api-p/smallprojectwhite/addWhite'
                : 'api-p/smallprojectwhite/editWhite',
            data,
          })
            .then((response) => {
              this.loading = false
              if (!response.data.hasError) {
                this.$message.success('操作成功')
                this.$emit('closeDialog', this.dialogType)
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
            .catch((error) => {
              this.loading = false
              if (error.response) {
                this.$message.error(error.response.data)
              }
            })
        } else {
          this.$message.error('请按照提示规则输入内容!')
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .el-dialog__body {
  padding: 24px;
}
/deep/ .el-radio-group {
  width: 100%;
  .el-radio {
    display: inline-block;
    width: 50%;
    margin-right: 0;
    line-height: 36px;
    .el-radio__label {
      display: inline-block;
      width: calc(100% - 30px);
      vertical-align: middle;
      white-space: normal !important;
    }
  }
}
</style>
